import React, { useEffect } from 'react';
import './index.less';
import { Table, Tooltip } from 'antd';

interface Props {
  irrDataSource?: any[];
  irrColumns?: any[];
  loading?: boolean;
  className?: string;
  rowKey?: string;
  customRowClass?: string;
  rowSelection?: {
    type?: string;
    selectedRowKeys?: any[];
    onChange?: Function;
  };
}
const IrrTable = (props: Props) => {
  const {
    irrDataSource = [],
    irrColumns = [],
    loading = false,
    className = '',
    rowKey = 'id',
    customRowClass = '',
    rowSelection = {},
    ...otherProps
  } = props;

  useEffect(() => {
    if (!irrDataSource.length) {
      return;
    }
    setTimeout(() => {
      let containter = document.getElementById('irr_table_containter');
      let v = containter?.getElementsByClassName('ant-table-body')[0];
      if (v) {
        v.scrollTop = 0;
      }
    }, 0);
  }, [irrDataSource]);

  let curInfo = {};
  if (irrDataSource.length) {
    curInfo = { scroll: { y: '100%' } };
  }
  if (rowSelection.type) {
    curInfo = { ...curInfo, rowSelection };
  }

  return (
    <div className="irr_table_main--containter">
      <Table
        id="irr_table_containter"
        dataSource={irrDataSource}
        columns={irrColumns}
        className={
          className ? `table_main--class ${className}` : `table_main--class`
        }
        rowKey={(row) => row[rowKey]}
        pagination={false}
        loading={loading}
        rowClassName={(record, index) => {
          let className =
            index % 2 ? 'table_main-shallow--gray' : 'table_main-deep--gray';
          if (customRowClass) {
            return `${className} ${customRowClass}`;
          } else {
            return `${className}`;
          }
        }}
        {...curInfo}
        {...otherProps}
      />
    </div>
  );
};

export default IrrTable;
